<template>
  <div class="safety-main">
    <!-- <div class="botton_left">
      <ul>
        <li class="one">
          <span>后湖小区</span>
        </li>
        <li class="two">
          <span>金鹅</span>

        </li>
        <li class="three">
          <span>亿达</span>
        </li>
        <li class="four">
          <span>天马</span>

        </li>
      </ul>
    </div> -->
    <div ref="box" style="width:100%;height:240px;">

    </div>
  </div>
</template>

<script>
import echart from "echarts"
export default {
  data() {
    return {
      data: [
        [4200, 3000, 20000, 35000, 5000, 1800],
        [5120, 14320, 8120, 26000, 2000, 21000],
        [5000, 14540, 28200, 25400, 42320, 21010],
        [5000, 10330, 21200, 21230, 22010, 11000]
      ]
    }
  },
  methods: {
    print() {
      let print = echart.init(this.$refs.box)
      let self = this
      let option = {
        title: {
          text: "小区安全系数",
          textStyle: { // 大标题 名称
            color: "white"
          }
        },
        color: ["red","yellow","skyblue","blue"], // 改变标题颜色 与线条颜色 统一
        legend: {
          orient: "vertical", // 标题默认水平 垂直
          left: "left", // 标题定位 居中 左 右
          top: 100, // 定位 的 宽高
          textStyle: { // 字体的颜色
            color: "white"
          },
          show: true, // 是否显示标题
          data: [
            {name: "后湖小区",icon: "circle"},
            {name: "金鹅",icon: "circle"},
            {name: "亿达",icon: "circle"},
            {name: "天马",icon: "circle"}
          ] // 标题内容
        },
        tooltip: { // 悬停
          trigger: "item"
          // backgroundColor: "rgba(255,255,255,0.8)", //设置背景图片 rgba格式
          // color: "black",
          // borderWidth: "1", //边框宽度设置1
          // borderColor: "gray", //设置边框颜色
          // textStyle: {
          //   color: "black" //设置文字颜色
          // },
        },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: "监控安防", max: 6500},
            { name: "异常出入", max: 16000},
            { name: "外来车辆数量", max: 30000},
            { name: "温度异常", max: 38000},
            { name: "重点人口", max: 52000}
          ]
        },
        series: [{
          name: "预算 vs 开销",
          type: "radar",
          data: [
            {
              value: self.data[0],
              name: "后湖小区"
            },
            {
              value: self.data[1],
              name: "金鹅"
            },
            {
              value: self.data[2],
              name: "亿达"
            },
            {
              value: self.data[3],
              name: "天马"
            }
          ]
        }]
      }
      print.setOption(option)
    }
  },
  mounted() {
    this.print()
  }
}
</script>

<style lang="scss">
$yellow: yellow;
  .safety-main {
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    display: flex;
    .botton_left {
      // flex: 1;
      display: flex;
      justify-content: center;
      position: relative;
      top: 60px;
      width: 20%;
      ul {
        margin-left: 20px;
        padding: 0px;
        height: 260px;
        flex: 3;
        li.one,li.two,li.three,li.four,li.five {
          list-style-type: disc;
          height: 30px;
          span {
          color: $yellow;
          }
        }
        li.one {
          color: red;
        }
        li.two {
          color: salmon;
        }
        li.three {
          color: yellow;
        }
        li.four {
          color: green;
        }
        li.five {
          color: blue;
        }
      }
    }
  }
</style>